<template>
  <div id="orders">
   <div class="opd">
      <h3>新增地址</h3>
    <ul>
      <li><span>收货人姓名：</span><input type="text" v-model="isRun"></li>
      <li><span>手机号码：</span><input type="text" v-model="isRun1"></li>
      <li><span>地址信息：</span><template><a-cascader class="active" :options="list"  @change="obu"  placeholder="Please select"></a-cascader></template></li>
      <li><span>详细地址：</span><input type="text" v-model="isRun3"></li>
    </ul>
    <a-button @click="btn" type="primary">
      保存
    </a-button>
   </div>
  </div>
</template>

<script>
export default {
data:()=>{
  return{
    isRun:'',
    isRun1:'',
    isRun2:'',
    isRun3:'',
    isRun4:'',
    list:[]
  }
},
methods:{
  btn(){
    this._axios.post(`/api/address`,{
    name:this.isRun,
    phone:this.isRun1,
    area:this.isRun2,
    area_name:this.isRun3,
    desc:this.isRun4
    }).then((res)=>{
      console.log(res);
      this.$router.push({path:'/shopping'})
    })
  },
  bt(){
    this._axios.delete(`/api/address/2`)
  },
  obu(value,selectedOptions){
    this.isRun4 = value
   this.isRun2 =selectedOptions
   this.isRun2 = this.isRun2[0].cityname+this.isRun2[1].cityname+this.isRun2[2].cityname
   this.isRun4 = this.isRun4.join()
   console.log(this.isRun2);
   console.log(this.isRun4);
  }
},
mounted(){
  this._axios.get('/api/city').then((res)=>{
    this.list=res.data.result
    console.log(this.list);
    
  })
}
}
</script>

<style lang="scss" scoped>
#orders{
  background-color: #f4f4f4;
  height: 100%;
  padding-top: 20px;
  .opd{
    // text-align: center;
     margin-top: 30px;
    width: 806px;
  margin: 0 auto;
  h3{
    
  }
  
  ul{
    // text-align: center;
    li{
      margin: 40px 0;
     span{
       width: 90px;
       display: inline-block;
        // text-align: right;
     }
     .ant-cascader-picker{
       width: 300px;
       padding: 0;
       span{
       width: 0;
     }
     }
     
     
     input{
       width: 300px;
       border: 1px solid #d9d9d9;
       height: 30px;
       outline: none;
      //  text-align: center;
     }
    }
  }
  }
}
</style>